<template>
  <view class="map-container">
    <view style="width: 100%; height: var(--status-bar-height)" />
    <!-- 页面标题 -->
    <view class="header">
      <view class="title">家族分布图</view>
      <view class="subtitle">查看李氏家族成员在全国的分布情况</view>
    </view>

    <!-- 地图容器 -->
    <view class="map-wrapper">
      <view v-if="!mapLoaded" class="loading-container">
        <wd-loading size="large" />
        <text class="loading-text">地图加载中...</text>
      </view>
      
      <!-- #ifdef H5 -->
      <!-- H5环境使用div容器 -->
      <view id="genealogy-map" class="map-content"></view>
      <!-- #endif -->
      
      <!-- #ifdef MP-WEIXIN -->
      <!-- 微信小程序环境使用map组件 -->
      <map
        id="wx-genealogy-map"
        class="map-content"
        :show-location="true"
        :enable-zoom="true"
        :enable-scroll="true"
        :enable-rotate="false"
        :enable-overlooking="false"
        :enable-building="false"
        :latitude="38"
        :longitude="104.5"
        :scale="5"
        :markers="wxMarkers"
        @loaded="onMapLoaded"
        @markertap="onMarkerTap"
      >
      </map>
      <!-- #endif -->

      <!-- 浮动控制面板 -->
      <view class="map-controls">
        <view class="control-panel">
          <view class="control-item" @click="showRegionSelector = true">
            <view class="control-icon">
              <wd-icon name="filter" size="18px" />
            </view>
            <text class="control-text">{{ getSelectedRegionLabel() }}</text>
          </view>
          <view class="control-divider"></view>
          <view class="control-item" @click="toggleMapViewType">
            <view class="control-icon">
              <wd-icon name="location" size="18px" />
            </view>
            <text class="control-text">{{ mapViewType === "marker" ? "标记点" : "热力图" }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 统计信息卡片 -->
    <view class="stat-cards">
      <wd-grid :column="3" :gutter="10">
        <wd-grid-item use-slot>
          <view class="stat-item">
            <text class="stat-number">{{ statistics.provinces }}</text>
            <text class="stat-label">省份</text>
          </view>
        </wd-grid-item>
        <wd-grid-item use-slot>
          <view class="stat-item">
            <text class="stat-number">{{ statistics.cities }}</text>
            <text class="stat-label">城市</text>
          </view>
        </wd-grid-item>
        <wd-grid-item use-slot>
          <view class="stat-item">
            <text class="stat-number">{{ statistics.members }}</text>
            <text class="stat-label">成员</text>
          </view>
        </wd-grid-item>
      </wd-grid>
    </view>

    <!-- 图例说明 -->
    <view class="legend-container">
      <view class="legend-title">图例说明</view>
      <view class="legend">
        <view class="legend-item">
          <view class="legend-color" style="background-color: #ff4d4f"></view>
          <text class="legend-text">50人以上</text>
        </view>
        <view class="legend-item">
          <view class="legend-color" style="background-color: #faad14"></view>
          <text class="legend-text">20-50人</text>
        </view>
        <view class="legend-item">
          <view class="legend-color" style="background-color: #1890ff"></view>
          <text class="legend-text">5-20人</text>
        </view>
        <view class="legend-item">
          <view class="legend-color" style="background-color: #52c41a"></view>
          <text class="legend-text">5人以下</text>
        </view>
      </view>
    </view>

    <!-- 地区选择弹窗 -->
    <wd-popup v-model="showRegionSelector" position="bottom" :z-index="10000">
      <view class="region-popup">
        <view class="popup-header">
          <text class="popup-title">选择地区</text>
          <wd-icon name="close" size="20px" @click="showRegionSelector = false" />
        </view>
        <wd-radio-group v-model="selectedRegion" class="region-list">
          <wd-radio v-for="item in regionOptions" :key="item.value" :value="item.value">
            {{ item.label }}
          </wd-radio>
        </wd-radio-group>
        <view class="popup-footer">
          <wd-button type="primary" block @click="applyRegionFilter">确定</wd-button>
        </view>
      </view>
    </wd-popup>
  </view>
</template>

<script setup lang="ts">
// 在脚本顶部添加AMap类型声明
declare global {
  interface Window {
    AMap: any;
  }
}
import { ref, onMounted, reactive, onBeforeUnmount } from "vue";
import FamilyAPI from "@/api/genealogy/family";
import RegionAPI from "@/api/system/region";
import { getCoordinatesFromAddress } from "./cityCoordinates";

// 高德地图API密钥
import { getAmapKey } from "@/config/map";
const amapKey = getAmapKey();



console.log(amapKey, 111111113333333333333);
// 地图实例
let amapInstance: any = null;
let heatmapInstance: any = null;
const mapLoaded = ref(false);
const mapViewType = ref("marker"); // 地图视图类型：热力图/标记点
const showRegionSelector = ref(false); // 控制地区选择弹窗

// 用于记录标记点位置的持久变量，保证每次刷新时位置一致
const markerPositions = new Map<string, [number, number]>();

// 微信小程序地图相关变量
const wxMapContext = ref(null); // 微信小程序地图上下文
const wxMarkers = ref([]); // 微信小程序地图标记点数组

// 统计数据
const statistics = reactive({
  provinces: 0,
  cities: 0,
  members: 0,
});

// 地区选项
const regionOptions = ref([{ value: "all", label: "全部地区" }]);

// 当前选中的地区
const selectedRegion = ref("all");

// 加载地区选项
const loadRegionOptions = async () => {
  try {
    // 获取省份列表
    const province = await RegionAPI.getOptions({ type: 0, areaCode: "360000000000" });

    // 构建地区选项
    const options = [{ value: "all", label: "全部地区" }];

    // 如果API返回了数据，则添加到选项中
    if (province && province && Array.isArray(province)) {
      province.forEach((item) => {
        options.push({ value: item.name, label: item.name });
      });
    }
    regionOptions.value = options;
  } catch (error) {
    console.error("加载地区选项失败:", error);
    // 使用默认选项（仅保留全部地区选项，具体地区选项将在加载数据后通过updateRegionOptionsFromData更新）
    regionOptions.value = [{ value: "all", label: "全部地区" }];
  }
};

// 根据实际数据更新地区选项
const updateRegionOptionsFromData = () => {
  const options = [{ value: "all", label: "全部地区" }];
  const provinceCityMap = new Map<string, Set<string>>(); // 省份 -> 城市集合的映射

  // 收集所有省份和城市数据
  if (distributionData.value.length > 0) {
    distributionData.value.forEach((item) => {
      // 使用mergerName字段解析省份和市区信息
      if (item.mergerName) {
        const locationInfo = parseMergerName(item.mergerName);
        const province = locationInfo.province;
        const city = locationInfo.city;

        if (province) {
          // 如果省份不存在于映射中，创建新的城市集合
          if (!provinceCityMap.has(province)) {
            provinceCityMap.set(province, new Set());
          }

          // 如果有城市信息，添加到对应省份的城市集合中
          if (city) {
            provinceCityMap.get(province).add(city);
          }
        }
      }
    });
  }

  // 构建二维数组结构的地区选项
  // 第一层：省份选项
  provinceCityMap.forEach((cities, province) => {
    // options.push({ value: province, label: province });

    // 第二层：城市选项，格式为 "省份,城市"
    cities.forEach((city) => {
      options.push({ value: `${province},${city}`, label: `  ${city}` });
    });
  });

  regionOptions.value = options;
};

// 获取选中地区的标签
const getSelectedRegionLabel = () => {
  const region = regionOptions.value.find((item) => item.value === selectedRegion.value);

  if (!region) return "全部地区";

  // 处理二维数组格式的标签：如果是城市级别，只显示城市名称
  if (region.value.includes(",")) {
    const cityName = region.label.trim(); // 移除前缀空格
    return cityName;
  }

  return region.label;
};

// 切换地图视图类型
const toggleMapViewType = () => {
  mapViewType.value = mapViewType.value === "marker" ? "heatmap" : "marker";
  renderMapByViewType();
};

// 家族成员分布数据
interface DistributionItem {
  id: string;
  familyName: string;
  nums: number;
  lnglat: [number, number];
  regionCode?: string;
  regionName?: string;
  description?: string;
  areaCode?: string;
  mergerName?: string;
  province?: string;
  city?: string;
  district?: string;
}

const distributionData = ref<DistributionItem[]>([]);

// 解析mergerName获取省份和市区信息
const parseMergerName = (mergerName: string) => {
  if (!mergerName) return { province: "", city: "", district: "" };

  const parts = mergerName.split(",");
  return {
    province: parts[0] || "",
    city: parts[1] || "",
    district: parts[2] || "",
  };
};

// 加载分布数据
const loadDistributionData = async () => {
  try {
    // 从API获取家谱分布数据
    const response = await FamilyAPI.getPage({
      pageNum: 1,
      pageSize: 100,
      familyId: undefined,
      familyName: "",
    });

    if (response && (response as any).list) {
      // 处理API返回的数据
      distributionData.value = (response as any).list.map((item: any) => {
        // 解析mergerName获取省份和市区信息
        const locationInfo = parseMergerName(item.mergerName);

        // 优先使用数据中的经纬度，如果没有则根据mergerName获取
        let lnglat: [number, number];
        if (item.lng && item.lat) {
          lnglat = [parseFloat(item.lng), parseFloat(item.lat)];
          console.log(`使用数据中的经纬度:`, lnglat);
        } else if (item.longitude && item.latitude) {
          lnglat = [parseFloat(item.longitude), parseFloat(item.latitude)];
          console.log(`使用数据中的经纬度:`, lnglat);
        } else {
          // 如果没有直接的经纬度信息，则根据mergerName获取
          lnglat = getCoordinatesFromAddress(item.mergerName);
        }

        const processedItem = {
          id: item.id,
          familyName: item.familyName,
          nums: item.nums || 1, // 使用count字段或默认为1
          lnglat: lnglat,
          regionCode: item.areaCode,
          regionName: locationInfo.city || locationInfo.province || item.mergerName,
          description: `${item.familyName}家族分支`,
          mergerName: item.mergerName,
          province: locationInfo.province,
          city: locationInfo.city,
          district: locationInfo.district,
        };

        // 输出每个家谱的定位信息
        console.log(`家谱定位信息:`, {
          id: processedItem.id,
          familyName: processedItem.familyName,
          mergerName: processedItem.mergerName,
          province: processedItem.province,
          city: processedItem.city,
          district: processedItem.district,
          coordinates: processedItem.lnglat,
        });

        return processedItem;
      });

      console.log(distributionData.value, 1231232132);
    } else {
      // 如果API没有返回数据，使用默认数据
      // distributionData.value = [
      //   { id: '1', familyName: '李氏家谱', nums: 25, lnglat: [115.892151, 28.676493], regionCode: '360100', regionName: '南昌市', description: '李氏家族南昌分支', mergerName: '全部地区,南昌市', province: '全部地区', city: '南昌市', district: '' },
      //   { id: '2', familyName: '李氏家谱', nums: 42, lnglat: [121.472644, 31.231706], regionCode: '310000', regionName: '上海市', description: '李氏家族上海分支', mergerName: '上海市', province: '上海市', city: '', district: '' },
      //   { id: '3', familyName: '李氏家谱', nums: 18, lnglat: [113.280637, 23.125178], regionCode: '440100', regionName: '广州市', description: '李氏家族广州分支', mergerName: '广东省,广州市', province: '广东省', city: '广州市', district: '' },
      //   { id: '4', familyName: '李氏家谱', nums: 22, lnglat: [114.298572, 30.584355], regionCode: '420100', regionName: '武汉市', description: '李氏家族武汉分支', mergerName: '湖北省,武汉市', province: '湖北省', city: '武汉市', district: '' },
      //   { id: '5', familyName: '李氏家谱', nums: 16, lnglat: [118.767413, 32.041544], regionCode: '320100', regionName: '南京市', description: '李氏家族南京分支', mergerName: '江苏省,南京市', province: '江苏省', city: '南京市', district: '' },
      //   { id: '6', familyName: '李氏家谱', nums: 27, lnglat: [106.504962, 29.533155], regionCode: '500000', regionName: '重庆市', description: '李氏家族重庆分支', mergerName: '重庆市', province: '重庆市', city: '', district: '' },
      //   { id: '7', familyName: '李氏家谱', nums: 65, lnglat: [113.665412, 34.757975], regionCode: '410000', regionName: '河南省', description: '李氏家族河南分支', mergerName: '河南省', province: '河南省', city: '', district: '' }
      // ];
    }

    // 计算统计数据
    const cities = distributionData.value.length;
    const provinces = new Set();
    let totalMembers = 0;

    distributionData.value.forEach((item) => {
      totalMembers += item.nums || 0;
      // 使用解析后的省份信息
      if (item.province) {
        provinces.add(item.province);
      }
    });

    statistics.provinces = provinces.size;
    statistics.cities = cities;
    statistics.members = totalMembers;

    // 根据实际数据更新地区选项
    updateRegionOptionsFromData();

    // 如果地图已加载，则更新地图显示
    if (amapInstance) {
      renderMapByViewType();
    }
  } catch (error) {
    console.error("加载分布数据失败", error);
    uni.showToast({
      title: "加载数据失败",
      icon: "none",
    });

    // 加载失败时使用默认数据
    // distributionData.value = [
    //   { id: '1', familyName: '李氏家谱', nums: 25, lnglat: [115.892151, 28.676493], regionCode: '360100', regionName: '南昌市', description: '李氏家族南昌分支', mergerName: '全部地区,南昌市', province: '全部地区', city: '南昌市', district: '' },
    //   { id: '2', familyName: '李氏家谱', nums: 42, lnglat: [121.472644, 31.231706], regionCode: '310000', regionName: '上海市', description: '李氏家族上海分支', mergerName: '上海市', province: '上海市', city: '', district: '' },
    //   { id: '3', familyName: '李氏家谱', nums: 18, lnglat: [113.280637, 23.125178], regionCode: '440100', regionName: '广州市', description: '李氏家族广州分支', mergerName: '广东省,广州市', province: '广东省', city: '广州市', district: '' },
    //   { id: '4', familyName: '李氏家谱', nums: 22, lnglat: [114.298572, 30.584355], regionCode: '420100', regionName: '武汉市', description: '李氏家族武汉分支', mergerName: '湖北省,武汉市', province: '湖北省', city: '武汉市', district: '' },
    //   { id: '5', familyName: '李氏家谱', nums: 16, lnglat: [118.767413, 32.041544], regionCode: '320100', regionName: '南京市', description: '李氏家族南京分支', mergerName: '江苏省,南京市', province: '江苏省', city: '南京市', district: '' },
    //   { id: '6', familyName: '李氏家谱', nums: 27, lnglat: [106.504962, 29.533155], regionCode: '500000', regionName: '重庆市', description: '李氏家族重庆分支', mergerName: '重庆市', province: '重庆市', city: '', district: '' },
    //   { id: '7', familyName: '李氏家谱', nums: 65, lnglat: [113.665412, 34.757975], regionCode: '410000', regionName: '河南省', description: '李氏家族河南分支', mergerName: '河南省', province: '河南省', city: '', district: '' }
    // ];

    // 计算默认统计数据
    statistics.provinces = 7;
    statistics.cities = 7;
    statistics.members = 215;
  }
};

// 加载高德地图脚本
const loadAMapScript = () => {
  return new Promise<void>((resolve, reject) => {
    // #ifdef H5
    // 在H5环境中检查是否已加载
    if (typeof window !== 'undefined' && window.AMap) {
      resolve();
      return;
    }

    const script = document.createElement("script");
    script.type = "text/javascript";
    script.async = true;
    script.src = `https://webapi.amap.com/maps?v=2.0&key=${amapKey}&plugin=AMap.HeatMap,AMap.Geolocation,AMap.Scale,AMap.ToolBar`;
    script.onerror = reject;
    script.onload = () => {
      // 确保AMap已成功加载
      if (typeof window !== 'undefined' && window.AMap) {
        resolve();
      } else {
        reject(new Error("高德地图脚本加载失败: AMap is undefined"));
      }
    };
    document.head.appendChild(script);
    // #endif

    // #ifdef MP-WEIXIN
    // 微信小程序环境下，使用微信小程序的地图API
    try {
      // 微信小程序的地图组件是内置的，不需要额外加载脚本
      // 这里可以进行一些小程序地图初始化前的准备工作
      resolve();
    } catch (error) {
      reject(new Error("微信小程序地图初始化失败"));
    }
    // #endif

    // #ifndef H5 || MP-WEIXIN
    // 其他非H5、非微信小程序环境下，提示用户
    setTimeout(() => {
      // 使用setTimeout避免阻塞
      uni.showToast({
        title: "当前环境不支持地图",
        icon: "none",
      });
      reject(new Error("当前环境不支持地图"));
    }, 0);
    // #endif
  });
};

// 初始化地图
const initMap = async () => {
  try {
    // #ifdef H5
    // 只在H5环境下执行地图初始化
    await loadAMapScript();

    if (typeof window !== 'undefined' && window.AMap) {
      amapInstance = new window.AMap.Map("genealogy-map", {
        zoom: 5,
        center: [104.5, 38], // 中国中心点
        viewMode: "2D",
        resizeEnable: true,
        touchZoom: true,
        doubleClickZoom: true,
      });

      // 添加地图控件
      amapInstance.addControl(new window.AMap.Scale());

      // 定位到当前位置
      const geolocation = new window.AMap.Geolocation({
        enableHighAccuracy: true,
        timeout: 10000,
        buttonPosition: "RB",
        buttonOffset: new window.AMap.Pixel(10, 20),
        zoomToAccuracy: true,
      });

      amapInstance.addControl(geolocation);

      mapLoaded.value = true;

      // 根据视图类型显示不同的地图
      renderMapByViewType();
    }
    // #endif

    // #ifdef MP-WEIXIN
    // 微信小程序环境下初始化地图
    await loadAMapScript();
    // 微信小程序使用内置的map组件，不需要像H5那样创建Map实例
    // 获取地图上下文
    try {
      wxMapContext.value = wx.createMapContext('wx-genealogy-map');
      console.log("微信小程序地图上下文创建成功");
    } catch (error) {
      console.error("创建微信小程序地图上下文失败:", error);
    }
    // 这里设置mapLoaded为true，以便UI可以显示地图
    setTimeout(() => {
      mapLoaded.value = true;
      console.log("微信小程序地图初始化成功");
    }, 500);
    // #endif

    // #ifndef H5 || MP-WEIXIN
    // 其他非H5、非微信小程序环境下，不执行地图初始化
    setTimeout(() => {
      mapLoaded.value = false;
      console.warn("当前环境不支持地图功能");
    }, 0);
    // #endif
  } catch (error) {
    console.error("加载地图失败:", error);
    mapLoaded.value = false;
    uni.showToast({
      title: "地图加载失败",
      icon: "none",
    });
  }
};

// 清除热力图实例
const clearHeatmap = () => {
  if (heatmapInstance) {
    heatmapInstance.setMap(null);
    heatmapInstance = null;
  }
};

// 根据选择的地区获取筛选后的家谱数据
const getFilteredGenealogyData = () => {
  if (selectedRegion.value === "all") {
    return distributionData.value;
  } else {
    return distributionData.value.filter((item) => {
      if (!item.mergerName) return false;

      const locationInfo = parseMergerName(item.mergerName);
      const selectedValue = selectedRegion.value;

      // 处理二维数组格式的选择：省份,城市
      if (selectedValue.includes(",")) {
        const [selectedProvince, selectedCity] = selectedValue.split(",");
        return locationInfo.province === selectedProvince && locationInfo.city === selectedCity;
      }
      // 处理省份级别的选择
      else {
        return locationInfo.province === selectedValue;
      }
    });
  }
};
const goToGenealogyDetail = (familyId: string) => {
  uni.navigateTo({
    url: `/pages/genealogy/detail?familyId=${familyId}`,
  });
};
// 根据视图类型渲染地图
const renderMapByViewType = () => {
  if (!amapInstance) return;

  // #ifdef H5
  // 清除所有覆盖物
  amapInstance.clearMap();

  // 确保热力图被清除
  clearHeatmap();

  // 获取筛选后的数据
  const filteredData = getFilteredGenealogyData();

  // 如果选择了特定地区，则将地图中心点移到该地区
  if (selectedRegion.value !== "all" && filteredData.length > 0) {
    const regionData = filteredData[0];
    amapInstance.setZoomAndCenter(9, regionData.lnglat);
  } else {
    // 恢复到全国视图
    amapInstance.setZoomAndCenter(5, [104.5, 38]);
  }

  if (mapViewType.value === "marker") {
    // 渲染标记点
    filteredData.forEach((item) => {
      // 检查是否有重叠位置，如果有则添加小偏移量
      const posKey = `${item.lnglat[0]},${item.lnglat[1]}`;
      let position = [...item.lnglat];

      if (markerPositions.has(posKey)) {
        // 使用基于ID的确定性偏移算法，确保相同ID的点始终获得相同偏移
        const offset = 0.01; // 约1公里的偏移量
        // 使用数据ID生成固定的偏移角度
        const hash = item.id
          .toString()
          .split("")
          .reduce((acc, char) => acc + char.charCodeAt(0), 0);
        const angle = ((hash % 360) * Math.PI) / 180;
        // 根据角度计算偏移量，确保相同ID的点总是在同一方向偏移
        position[0] += Math.cos(angle) * offset;
        position[1] += Math.sin(angle) * offset;
      }

      // 记录使用过的位置
      markerPositions.set(posKey, true);
      // 根据经纬度计算位置偏移量（像素）
      function getPositionOffset(coordinate: number): number {
        // 返回固定偏移量0，确保图标位置稳定
        return 0;
      }
      
      const markerColor = getMarkerColor(item.nums);
      // 使用自定义HTML作为标记点，图片中间显示家谱数量
      const marker = new window.AMap.Marker({
        position: position,
        title: item.familyName,
        content: `
          <div style="position: relative; width: 36px; height: 36px;">
            <text style="color: ${markerColor}; font-size: 36px; position: relative; left: ${getPositionOffset(position[0])}px; top: ${getPositionOffset(position[1])}px;"  class="iconfont icon-benshu"></text>
            <span style="
              position: absolute;
              left: 0; top: 0; width: 36px; height: 36px;
              display: flex; align-items: center; justify-content: center;
              color: #fff; font-weight: bold; font-size: 12px;
              text-shadow: 0 1px 3px rgba(0,0,0,0.5);
              pointer-events: none;
            ">${item.nums}</span>
          </div>
        `,
        label: {
          content: `<div class="marker-label">${item.familyName}</div>`,
          direction: "top",
          offset: new window.AMap.Pixel(0, -5),
        },
        offset: new window.AMap.Pixel(-18, -18),
      });

      // 创建信息窗口
      const infoWindow = new window.AMap.InfoWindow({
        content: `<div class="info-window">
          <h4>${item.familyName}</h4>
          <p>省份：${item.province || ""}</p>
          <p>城市：${item.city || ""}</p>
          <p>区县：${item.district || ""}</p>
          <p>家族成员：${item.nums}人</p>
          <p>完整地址：${item.mergerName || ""}</p>
          <p style="font-size: 12px; color: #999;">坐标：${item.lnglat[0].toFixed(6)}, ${item.lnglat[1].toFixed(6)}</p>
          <h6 id="genealogy-detail-link-${item.id}" style='color:#1890ff;font-size:13px;cursor:pointer;'>查看家谱详情</h6>
        </div>`,
        offset: new window.AMap.Pixel(0, -30),
      });

      // 绑定点击事件
      marker.on("click", () => {
        infoWindow.open(amapInstance, marker.getPosition());
        setTimeout(() => {
          const link = document.getElementById(`genealogy-detail-link-${item.id}`);
          if (link) {
            link.onclick = () => goToGenealogyDetail(item.id);
          }
        }, 100);
      });
      // 添加到地图
      amapInstance.add(marker);
    });
  } else if (mapViewType.value === "heatmap") {
    // 渲染热力图
    const heatmapData = {
      max: 100,
      data: filteredData.map((item) => {
        return {
          lng: item.lnglat[0],
          lat: item.lnglat[1],
          nums: item.nums,
        };
      }),
    };

    // 创建热力图实例
    heatmapInstance = new window.AMap.HeatMap(amapInstance, {
      radius: 25, // 热力图的半径
      opacity: [0, 0.8], // 热力图透明度范围
      gradient: {
        0.4: "#52C41A",
        0.6: "#1890FF",
        0.8: "#FAAD14",
        1.0: "#FF4D4F",
      },
    });

    // 设置热力图数据
    heatmapInstance.setDataSet(heatmapData);
  }
  // #endif
  
  // #ifdef MP-WEIXIN
  if (!wxMapContext.value || !mapLoaded.value) {
    return;
  }

  const filteredData = getFilteredGenealogyData();

  if (mapViewType.value === "marker") {
    // 渲染微信小程序地图标记点
    const markers = filteredData.map((item, index) => {
      let position = item.lnglat;
      
      // 使用与H5相同的位置偏移逻辑
      const posKey = `${Math.round(position[0] * 1000)},${Math.round(position[1] * 1000)}`;
      if (markerPositions.has(posKey)) {
        // 使用基于ID的确定性偏移算法，确保相同ID的点始终获得相同偏移
        const offset = 0.01; // 约1公里的偏移量
        // 使用数据ID生成固定的偏移角度
        const hash = item.id
          .toString()
          .split("")
          .reduce((acc, char) => acc + char.charCodeAt(0), 0);
        const angle = ((hash % 360) * Math.PI) / 180;
        // 根据角度计算偏移量，确保相同ID的点总是在同一方向偏移
        position[0] += Math.cos(angle) * offset;
        position[1] += Math.sin(angle) * offset;
      }
      // 记录使用过的位置
      markerPositions.set(posKey, true);
      
      const markerColor = getMarkerColor(item.nums);
      
      // 为每个标记点生成一个唯一的id
      const markerId = `marker-${item.id}`;
      
      return {
        id: markerId,
        longitude: position[0],
        latitude: position[1],
        width: 36,
        height: 36,
        // 微信小程序地图标记点使用自定义图标
        iconPath: '/static/marker-icon.svg',
        // 可以根据人数动态设置标记点颜色或大小
        // 注意：微信小程序地图不支持直接在标记点上显示文字，需要额外处理
        callout: {
          content: `${item.familyName}: ${item.nums}人`,
          color: '#ffffff',
          bgColor: '#1890ff',
          fontSize: 12,
          borderRadius: 4,
          padding: 4,
          display: 'BYCLICK', // 点击显示
          textAlign: 'center'
        },
        // 保存数据，方便点击时获取
        data: item
      };
    });
    
    wxMarkers.value = markers;
  } else if (mapViewType.value === "heatmap") {
    // 微信小程序环境下提示热力图不支持
    uni.showToast({
      title: '微信小程序环境暂不支持热力图显示',
      icon: 'none'
    });
  }
  // #endif
};

// 根据人数获取标记点颜色
function getMarkerColor(value: number) {
  if (value > 50) return "#FF4D4F"; // 红色
  if (value > 20) return "#FAAD14"; // 橙色
  if (value > 5) return "#1890FF"; // 蓝色
  return "#52C41A"; // 绿色
}

// 微信小程序地图标记点点击事件处理函数
const onMarkerTap = (e) => {
  const markerId = e.markerId;
  const markerData = wxMarkers.value.find(marker => marker.id === markerId)?.data;
  
  if (markerData) {
    // 显示标记点信息
    const content = `
      姓氏：${markerData.familyName}\n
      省份：${markerData.province || ""}\n
      城市：${markerData.city || ""}\n
      家族成员：${markerData.nums}人\n
      完整地址：${markerData.mergerName || ""}
    `;
    
    wx.showModal({
      title: '家族信息',
      content: content,
      showCancel: true,
      cancelText: '关闭',
      confirmText: '查看详情',
      success: (res) => {
        if (res.confirm) {
          // 查看家谱详情
          goToGenealogyDetail(markerData.id);
        }
      }
    });
  }
};

// 地图加载完成回调（微信小程序）
const onMapLoaded = () => {
  console.log("微信小程序地图加载完成");
  mapLoaded.value = true;
  // 地图加载完成后渲染标记点
  renderMapByViewType();
};

// 应用地区筛选
const applyRegionFilter = () => {
  showRegionSelector.value = false;
  renderMapByViewType();
};

// 组件卸载前清理资源
onBeforeUnmount(() => {
  // #ifdef H5
  if (amapInstance) {
    amapInstance.destroy();
    amapInstance = null;
  }
  clearHeatmap();
  // #endif
});

// 组件挂载后初始化地图和加载数据
onMounted(async () => {
  await loadRegionOptions(); // 加载地区选项
  await loadDistributionData(); // 获取家谱数据
  initMap(); // 初始化地图
});
</script>

<style lang="scss">
page {
  background: #f5f5f5;
  font-size: 28rpx;
}

.map-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-bottom: 30rpx;
}

.header {
  padding: 20rpx 30rpx;
  background-color: #fff;

  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }

  .subtitle {
    font-size: 24rpx;
    color: #666;
    margin-top: 6rpx;
  }
}

.map-wrapper {
  position: relative;
  width: 100%;
  height: 750rpx;
  margin-bottom: 20rpx;
}

.loading-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 10;

  .loading-text {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #666;
  }
}

.map-content {
  width: 100%;
  height: 100%;
}

.map-controls {
  position: absolute;
  top: 20rpx;
  left: 0;
  right: 0;
  z-index: 5;
  padding: 0 20rpx;

  .control-panel {
    display: flex;
    background-color: #fff;
    border-radius: 8rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
    padding: 15rpx 20rpx;
    width: 100%;
    justify-content: space-between;
  }

  .control-item {
    display: flex;
    align-items: center;
    padding: 10rpx 15rpx;
    cursor: pointer;
    min-width: 45%;
  }

  .control-icon {
    margin-right: 15rpx;
    flex-shrink: 0;
  }

  .control-text {
    font-size: 28rpx;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .control-divider {
    width: 2rpx;
    height: 40rpx;
    background-color: #eee;
    margin: 0 10rpx;
    flex-shrink: 0;
  }
}

.stat-cards {
  padding: 0 20rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 8rpx;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;

  .stat-number {
    font-size: 36rpx;
    font-weight: bold;
    color: #1890ff;
  }

  .stat-label {
    font-size: 24rpx;
    color: #666;
    margin-top: 6rpx;
  }
}

.legend-container {
  margin: 0 20rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 8rpx;
}

.legend-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
}

.legend {
  display: flex;
  justify-content: space-between;

  .legend-item {
    display: flex;
    align-items: center;

    .legend-color {
      width: 16rpx;
      height: 16rpx;
      border-radius: 50%;
      margin-right: 8rpx;
    }

    .legend-text {
      font-size: 22rpx;
      color: #666;
    }
  }
}

.region-popup {
  padding: 30rpx;

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    .popup-title {
      font-size: 32rpx;
      font-weight: bold;
    }
  }

  .region-list {
    max-height: 600rpx;
    overflow-y: auto;
    margin-bottom: 30rpx;
  }

  .popup-footer {
    padding-top: 20rpx;
  }
}

/* 自定义标记点样式 */
:deep(.custom-marker) {
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20rpx;
  font-weight: bold;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.3);
}

:deep(.marker-label) {
  padding: 2px 6px;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  color: #333;
}

:deep(.info-window) {
  padding: 15rpx;
  max-width: 280rpx;

  h4 {
    margin: 0 0 10rpx;
    font-size: 28rpx;
  }

  p {
    margin: 6rpx 0;
    font-size: 24rpx;
    line-height: 1.5;
    color: #666;
  }
}
</style>
